const path = require('path')
// 实现生成虚拟入口文件Index.html
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // webpack的入口文件
    entry: path.join(__dirname, 'src', 'main.js'),
    // 要输出的文件名
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: "development",
    devServer: {
        // 用于配置开发服务dev-server的第二种形式
        open: true,
        port: 8086,
        // 托管的根目录
        contentBase: 'src',
        hot: true
    },
    plugins: [
        // new webpack.HotModuleReplacementPlugin()
        new HtmlWebpackPlugin({
            // 指定模板页面
            template: path.join(__dirname, 'src', 'index.html'),
            // 电脑内存中的文件名称，看不到的
            name: 'index.html'
        })
    ],
    // 配置加载器
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
},        /*{
                       test: /\.scss$/,
                       use: ['style-loader', 'css-loader', 'sass-loader']
                   },*/
        {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'stage-0'],
                        plugins: ['transform-runtime']
                    }
                },
                // 不包含node_modules中的模块js
                exclude: /node_modules/,
            }, {
                test: /\.(png|jpg|jpeg|bmp)/,
                use: ['url-loader?name=[name].[ext]']
            }, {
                test: /\.(svg|ttf|eot|woff|woff2)$/,
                use: ['url-loader']
            },
            // 处理vue的加载器
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }

        ]
    },
    // 配置加載vue的js文件
    resolve: {
        // 設置vue導入包時的路徑
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
}